<template>
    <el-container class="box">
        <!-- 侧边栏 -->
        <el-menu :default-active="active" class="el-menu-vertical-demo el-menu" :collapse="isCollapse" active-text-color="#41b883" text-color="white" background-color="rgb(85, 109, 132)">
            <div class="sidebar-head">
                <i class="text" v-show="isCollapse==false">w夏了夏天</i>
                <i v-show="isCollapse == false" class="el-icon-d-arrow-left" @click="isCollapse=!isCollapse"></i>
                <i v-show="isCollapse == true" class="el-icon-d-arrow-right" @click="isCollapse=!isCollapse"></i>
            </div>
            <el-submenu :index="String(index+1)" v-for="(item,index) in nav" :key="index">
                <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{item.nav_name}}</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item @click="nav_like(item1.name,item1.url,item1.memn,item.nav_name)" :index="item1.memn" v-for="(item1,index1) in item.arr" :key="index1">{{item1.name}}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>

        <el-container>
            <!-- 头部 -->
            <el-header class="el-padding el-header">
                <i class="el-icon-rank" @click="fullscreen()"></i>
                <el-menu  class="el-menu-demo fr" mode="horizontal">
                    <el-submenu index="1">
                        <template slot="title">
                            <div class="user">
                                w夏了夏天
                                <img src="../assets/imges/325058.jpg" />
                            </div>
                        </template>
                        <el-menu-item index="1-1">设置</el-menu-item>
                        <el-menu-item index="1-2">退出登录</el-menu-item>
                    </el-submenu>
                </el-menu>
                <!-- 历史导航栏 -->
                <div class="history-nav" ref="history_nav">
                    <div class="history-box" ref="history_box">
                        <el-tag @click="history_nav(item.name,item.url,item.memn,item.parentlevel_name)" :type="nav_name!=item.name?'info':'danger'" :class="[{historynavname:index != 0},{el_tag:nav_name==item.name}]" v-for="(item,index) in storage_nav" :key="index" size="small" :disable-transitions="false" :closable="0!=index" @close="handleClose(index)">{{item.name}}</el-tag>
                    </div>
                </div>
            </el-header>
            <!-- 内容区 -->
            <el-main class="el-padding el-main">
                <el-breadcrumb separator="/" class="fl el-breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/' }">{{parentlevel_name}}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{nav_name}}</el-breadcrumb-item>
                </el-breadcrumb>

                <router-view class="el-main-router el-main-router-hodedre"></router-view> <!-- 这里显示的子路由内容 -->
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    data() {
      return {
        active:'1-1',//默认选择的导航
        isCollapse: false,//侧边栏隐藏状态
        parentlevel_name:'TAB',//父级名称
        nav_name:'首页',//当前选择的页面标识
        nav:[ //侧边栏导航数据
            {
                nav_name:'TAB',arr:
                [
                    {name:'首页',url:'./index',memn:'1-1'}
                ]
            },
            {
                nav_name:'综合实例',arr:
                [
                    {name:'表格数据',url:'./tablepage',memn:'2-1'},
                    {name:'富文本',url:'./richtext',memn:'2-2'},
                    {name:'轮播',url:'./slideshow',memn:'2-3'}
                ]
            },
            {
                nav_name:'错误页面',arr:
                [
                    {name:'401',url:'./exce1',memn:'3-1'},
                    {name:'404',url:'./exce2',memn:'3-2'}
                ]
            }
        ],
        storage_nav:[{name:'首页',url:'./index',memn:'1-1',parentlevel_name:'TAB'}],//历史导航存储数据
      }
    },
    methods: {
        //导航选择
        nav_like(name,url,memn,nav_name){
            //根据里面盒子与外面盒子宽度对比。如果超过了宽度，进行导航选择的时候给提示
            if(this.$refs.history_box.offsetWidth+50 > this.$refs.history_nav.offsetWidth){
                this.$message('菜单选择已达上限，请关闭一些再打开');
            }
            else{
                this.parentlevel_name = nav_name;
                this.active = memn;
                this.nav_name = name;//改变历史导航名称

                let istrue = false;//初始化存在状态
                //遍历数组--判断数组里是否有这条数据
                for(let item in this.storage_nav){
                    if(this.storage_nav[item].name == name){
                        istrue = true;//存在
                    }
                }
                //如果不存在则添加进数组
                if(istrue === false){
                    this.storage_nav.push({name:name,url:url,memn:memn,parentlevel_name:nav_name});
                }
                this.$router.push(url);
            }
        },
        //删除历史导航
        handleClose(index) {
            this.storage_nav.splice(index,1);
            //删除之后跳转到前面那一页
            this.active = this.storage_nav[this.storage_nav.length-1].memn;
            this.$router.push(this.storage_nav[this.storage_nav.length-1].url);
        },
        //历史导航
        history_nav(name,url,memn,parentlevel_name){
            this.parentlevel_name = parentlevel_name;//父级别
            this.nav_name = name;//改变历史导航名称
            this.active = memn;
            this.$router.push(url);
        },
        //全屏显示
        fullscreen(){
            //判断屏幕是否全屏状态
            if(document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen == false){
                //设置全屏
                var el = document.documentElement;
                var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
                if(typeof rfs != "undefined" && rfs) {
                    rfs.call(el);
                }
            }
            else{
                //退出全屏
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                }
                else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                }
                else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }
                else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
                if(typeof cfs != "undefined" && cfs) {
                    cfs.call(el);
                }
            }
        }
    },
    mounted(){
        this.$router.push('./index');//浏览器每次页面刷新跳转到首页
    }
  }
</script>

<style scoped lang="less">
    @import url("../assets/css/home.css");
</style>
